<#include "common/common.html"/>
<meta charset="UTF-8">
	<table
		     class="easyui-datagrid"   
		     id="datagrid"  
	         title="Banner管理"  
	         url="${base}/banner/list"
	         toolbar="#searchtool,#toolbar" 
	         pagination="true"
	         rownumbers="true" 
	         fitColumns="true"
	         singleSelect="true"
	         data-options="fit:false,border:false,pageSize:20,pageList:[5,10,15,20]" >   
	    <thead>  
	        <tr>
	            <th field="id" width="6%" checkbox="true">编号</th> 
	            <th field="name" width="10%">名字</th>
	            <th field="remark" width="5%">备注</th>  
	            <th field="sort" width="5%">排序</th> 
	            <th field="addtime" width="10%" formatter="formatLongDate" >时间</th> 
	            <th field="url" width="30%" formatter="formatUrl">图片</th> 
	            <th field="actionUrl" width="25%">跳转地址</th>
	          <!--   <th field="operate" width="18%" formatter="formatOper">操作</th>    -->	         
	        </tr>  
	    </thead>  
	</table>  
	<div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openNewDlg();">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openEditDlg();">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="singleDel('banner/remove');">删除</a>
</div>
<div id="banner-dlg" class="easyui-dialog"  style="padding:10px 20px;" data-options="iconCls:'icon-edit',closed:true,modal:true,resizable:true,modal:true,buttons:'#dlg-buttons'" >
        <form id="banner-fm" method="post">
        	<input type="hidden" name="id" id="id"> 
        	<input type="hidden" name="url" id="url"> 
        	<div class="fitem">
               <label>名称:</label>
               <input name="name" id="name">&nbsp;&nbsp;
               <label>备注:</label>
               <input name="remark" id="remark" required="true" >
	        </div>	
	        <div class="fitem">
               <label>排序:</label><select id="sort" name="sort"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
               <option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option>
               </select>
                <label>图片:</label>
               <!-- <input name="url" id="url"> -->
                <input type="file" id="file" name="file"
				style="width: 264px" onchange="uploadImg();">
				<img
				id="img" src=""
				height="200px">
	        </div>	
	        <div class="fitem">
	         <label>跳转地址:</label>
	         <input type="text" id="actionUrl" name="actionUrl"/>
	        </div>
        </form>
        </div>
  <div id="dlg-buttons">
    <a href="javascript:void(0)" id="saveBtn" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="javascript:submit('banner-dlg','banner-fm')" style="width:90px">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#banner-dlg').dialog('close')" style="width:90px">取消</a>
</div>
	<script>
	function openNewDlg(){
		centerDialog("banner-dlg").dialog('open').dialog('setTitle',"添加banner图");
		$("#banner-fm").form('clear');	
		$("#img").attr("src","");
		$("#sort").val(7);
	    url= $("#base").val()+"/banner/doadd";
	}
	function formatLongDate(value,row,index){
		return getFormatDateByLong(value, "yyyy-MM-dd hh:mm:ss");
	}
	function openEditDlg(){
	    var rows = $('#datagrid').datagrid('getSelections');
	    if (rows&&rows.length==1){
	    	centerDialog("banner-dlg").dialog('open').dialog('setTitle',"修改Banner图");
	    	//$("#viewImg").attr("src","${zhaorongbaoFileUrl}/"+rows[0].pic);
	    	$("#banner-dlg").form('clear');
	    	$("#banner-dlg").form('load',rows[0]);
	    	if(rows[0].url){
	    		$("#img").attr("src","${zhaorongbaoFileUrl}/"+rows[0].url);
	    	}	    		      
	        url = $("#base").val()+"/banner/doadd";	      
	    }else{
	    	$.messager.alert('提示','请选择一条数据进行操作','info');
	    }
	}
	
	function formatUrl(val,row,index){
		var src= "${zhaorongbaoFileUrl}/";
		var img ="";
		if(row.url){
			src = src+row.url;	 
			img="<a href='"+src+"' target='_blank'><img width='200' height='80' src='"+src+"'/></a>";
		}	
		return img;
	}
	function uploadImg() {
		if ("" == $("#file").val()) {
			$.messager.alert('提示', '请先选择要上传的图片', 'info');
		} else {
			$.ajaxFileUpload({
				url : base+'/image/uploadImg',
				secureuri : false,
				fileElementId : 'file',//file标签的id  
				dataType : 'json',//返回数据的类型  
				data:{"type":10,"bizid":-1},
				success : function(data, status) {
					var json = data;
					if (json.code!=1) {
						$.messager.alert('错误', json.msg);
					} else {
						var newId="#img";
						$(newId).attr("src",
								"${zhaorongbaoFileUrl}/" + json.path);
						$("#url").val(json.path);
						$("#name").val(json.name);
						var oldId = $("#id").val();
						console.log("id变更了2，oldId="+oldId+",newId="+json.id);
						console.log(oldId == "");
						console.log(json.id != null);
						console.log(undefined != null);
						//使用数据库中最新的id
						if(!oldId && json.id){
							console.log("id变更了，oldId="+oldId+",newId="+json.id);
							$("#id").val(json.id);
						}
					}

				},
				error : function(data, status, e) {
					$.messager.alert('提示', '上传失败，图片格式不正确或大小超过1M', 'info');
				}
			});
		}

	}
	</script>